<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<style>
			.lieMing{
				background-color: #055160;
			}
			.lieMing8{
				background-color: #0A58CA;
			}
		</style>
	</head>
	<body style="overflow-x: hidden;">
		<h1>Hello World</h1>
		<!-- 
			两边留白
		 -->
		<div class="container" style="background-color: #157a77;height: 500px;">
			contiainer响应式布局
		</div>
		<!-- 
			全布局
		 -->
		<div class="container-fluid" style="background-color: #055160;height: 500px;margin-top: 2%;">
			
		</div>
		<!-- 
			栅格网格系统
				1.列组合
					列总和数不能超过12 
				2.列偏移
					
		 -->
		 <!-- 布局容器 -->
		 <div class="container" style="margin-top: 2%;">
			 <!-- 行元素 -->
			 <div class="row">
				 <!-- 列元素 col-xs-数值  col-sm-数值 col-md-数值 col-lg-数值-->
				 <div class="col-md-4 lieMing">4</div>
				 <div class="col-md-8 lieMing8">8</div>
			 </div>
		 </div>
		 <hr>
		 <!-- 列偏移 -->
		 <div class="row">
			 <!-- 列元素 col-xs-数值  col-sm-数值 col-md-数值 col-lg-数值-->
			 <div class="col-md-1" style="background-color: #13653F;">4</div>
			 <div class="col-md-6 offset-4" style="background-color: #20C997;">8</div>
		 </div>
		 
		 <div class="row">
			 <!-- 列元素 col-xs-数值  col-sm-数值 col-md-数值 col-lg-数值-->
			 <div class="col-md-1" style="background-color: #13653F;">4</div>
			 <div class="col-md-6" style="background-color: #20C997;">8</div>
		 </div>
	</body>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/jquery-360.min.js"></script>
</html>
